// 先判断本地存储里是否存在数据，如果有直接取出来用，没有则创建新的data数组
let data = (localStorage.getItem('todoList')) ? JSON.parse(localStorage.getItem('todoList')) : []

let id = 0

const input = document.querySelector('#item')
const addBtn = document.querySelector('#addBtn')
const removeSVG =
  `<svg class="icon grey" aria-hidden="true">
<use xlink:href="#icon-lajitong"></use>
</svg>`
const finishedSVG =
  `<svg class="icon icon-green" aria-hidden="true">
  <use xlink:href="#icon-0-58"></use>
</svg>`

addBtn.addEventListener('click', clickAdd)
input.addEventListener('keyup', keyupAdd)
// 初始化渲染
render(data)

// data数据更新函数
function dataUpdated () {
  localStorage.setItem('todoList', JSON.stringify(data))
}

// 初始化渲染函数
function render (data) {
  for (let i = 0; i < data.length || 0; i++) {
    addItemToDOM(data[i])
  }
}

function clickAdd () {
  let value = input.value
  if (value) {
    const item = addItem(value)
    addItemToDOM(item)
    // 添加了itemData数据后将data数据加入本地存储
    dataUpdated()
  }
}

function keyupAdd (e) {
  let value = input.value
  if (e.key === 'Enter' && value) {
    const item = addItem(value)
    addItemToDOM(item)
    // 添加了itemData数据后将data数据加入本地存储
    dataUpdated()
  }
}

function getID () {
  return ++id
}


function addItem (value) {
  // 创建itemData对象，记录数据
  let itemData = { id: getID(), value: value, done: status ? true : false }
  console.log(itemData);

  let list = null;
  if (status) {
    list = document.querySelector('#completed')
    data.push(itemData)
  } else {
    list = document.querySelector('#incomplete')
    data.push(itemData)
  }

  return itemData
}

// 添加待办事项
function addItemToDOM (dataObj) {
  input.value = ''


  let list = dataObj.done ? document.querySelector('#completed') : document.querySelector('#incomplete')

  // // 将创建的itemData添加到data数据中
  // status ? data.completed.push(itemData) : data.incomplete.push(itemData)

  let item = document.createElement('li')
  let buttons = document.createElement('div')
  let remove = document.createElement('button')
  let finished = document.createElement('button')

  remove.innerHTML = removeSVG
  remove.classList.add('remove')
  // 监听item删除按钮点击事件
  remove.addEventListener('click', deleteItem(dataObj.id))

  finished.innerHTML = finishedSVG
  finished.classList.add('complete')
  // 监听item完成按钮点击事件(切换完成/未完成状态)
  finished.addEventListener('click', changeStage(dataObj.id, dataObj.done))

  buttons.classList.add('buttons')
  buttons.appendChild(remove)
  buttons.appendChild(finished)

  item.innerHTML = dataObj.value
  item.appendChild(buttons)
  list.insertBefore(item, list.childNodes[0])
}


// 删除待办事项
function deleteItem (id) {
  return function () {
    // 拿到按钮对应的item和todos
    let item = this.parentNode.parentNode
    let todos = item.parentNode
    // 移除掉当前节点
    todos.removeChild(item)

    data = data.filter(item => {
      return item.id !== id
    });

    // 删除了item数据后将data数据加入本地存储
    dataUpdated()
  }
}


// 状态切换
function changeStage (id, status) {
  return function () {
    // 更新data中指定数据的状态
    data.forEach(item => {
      if (item.id === id) {
        item.done = !item.done
      }
    })

    // 状态切换后也要更新本地存储的状态
    dataUpdated()

    // 拿到按钮对应的item和todos
    let item = this.parentNode.parentNode
    let todos = item.parentNode

    // 另一个todos（如果当前todos是已完成，那另一个todos列表则是未完成）
    let anotherTodos = (todos.id === 'completed') ? document.querySelector('#incomplete') : document.querySelector('#completed')

    // 从当前todos列表删除，添加到另一个todos列表
    todos.removeChild(item)
    anotherTodos.insertBefore(item, anotherTodos.childNodes[0])
  }
}


